<template>
  <div class="app">
    <h3 class="cll_h3"> 配送管理</h3>
  </div>
  <div>
    <hr />
    <el-form :model="form" label-width="120px" :inline='true'>
      <el-form-item>
        <el-select v-model="form.region" placeholder="男士餐">
          <el-option label="男士餐" value="男士餐" />
          <el-option label="女士餐" value="女士餐" />
          <el-option label="工作餐" value="工作餐" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" placeholder="开始时间" style="width: 100%" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-date-picker v-model="form.date2" type="date" placeholder="结束时间" style="width: 100%" />
        </el-col>

      </el-form-item>
      <el-form-item>
        <el-input v-model="form.name" placeholder="单号/姓名/电话" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="filter"  color="#999">筛选</el-button>
        <el-button type="primary" @click="leadout"  color="#999">导出</el-button>
      </el-form-item>
    </el-form>
    <hr />
  </div>

  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />

    <el-table-column label="订单号" width="150">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="deliveryp" label="配送产品" width="120" />
    <el-table-column property="address" label="收货地址" show-overflow-tooltip />
    <el-table-column property="pay" label="付款状态" show-overflow-tooltip />
    <el-table-column property="deliverys" label="配送状态" show-overflow-tooltip />
    <el-table-column property="receiver" label="收货人" show-overflow-tooltip />
    <el-table-column property="phone" label="收货手机" show-overflow-tooltip />
    <el-table-column property="time" label="下单时间" show-overflow-tooltip />
    <el-table-column label="操作" inline="true">
     <template #default="scope">
      <el-link type="info" class="link" @click="handleFind(scope.row)">查看</el-link>
      <el-link type="info" @click="handleDel(scope.row.date)">删除</el-link>
     </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <el-pagination 
  background layout="prev, pager, next" 
  :total="total"
  :default-page-size="pageSize"
  @current-change="pagechange"
  class="paging" />
</template>

<script  lang="ts">
import {distribution} from '@/api/distribution'
import { ElMessage, ElMessageBox } from 'element-plus'
import { utils, writeFileXLSX } from 'xlsx'
import dayJS from 'dayjs'
import { defineComponent } from 'vue'
export default defineComponent( {
  name: '',
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        page:1,

      },
      str:'YYYY-MM-DD',
      // tableData: [
      //   {
      //     date: '2017060500123',
      //     deliveryp: '男士餐',
      //     address: '地址',
      //     pay: '已付款',
      //     deliverys: '待配送',
      //     receiver: '吉子',
      //     phone: '12345678945',
      //     time: '2017-06-05  12:30'

      //   },

      // ]
      tableData:[],
      pageSize:5,
      total:5,
      exportlist:[],
    }
  },
 
  mounted(){
 
  },
  methods: {
    handlePageChange() {
     
    },
    async filter() {
      // const date1 = dayJS(this.form.date1).format(this.str)
      // const date2 = dayJS(this.form.date2).format(this.str)
      let data1=new Date(this.form.date1)
      let time1=data1.getTime()
      let data2=new Date(this.form.date2)
      let time2=data2.getTime()
      // @ts-ignore
      this.form.date1=time1
      // @ts-ignore
      this.form.date2=time2
        // @ts-ignore
    
      console.log(this.form)
      // 筛选
      const data = this.form
      data.page=1
      const res = await distribution(data)
      console.log(res)
       // @ts-ignore
       this.tableData=res.list
        // @ts-ignore
        this.total = res.total
        // @ts-ignore
        this.pageSize = res.pageSize
    
    
    },
    leadout(){
      ElMessageBox.confirm(
        '是否确认导出Exel表格',
        '下载确认',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'success',
        }
      )
        .then(() => {
          this.export()
          ElMessage({
            type: 'success',
            message: '导出成功',
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消导出',
          })
        })
    },
    // 导出函数
    export(){
      const list:any[] = this.exportlist
      list.unshift({
           date: '订单号',
          deliveryp: '配送产品',
          address: '收货地址',
          pay: '付款状态',
          deliverys: '配送状态',
          receiver: '收货人',
          phone: '收货手机',
          time: '下单时间'
      },
       ...this.tableData
      )
      // 简历工作表  数组转工作表格式
      const ws = utils.json_to_sheet(list)
      // 创建工作簿
      const wb = utils.book_new()
      // 工作表插入工作簿
      utils.book_append_sheet(wb, ws, '配送状况')
      writeFileXLSX(wb, `配送状况-${new Date().toISOString()}.xlsx`)
    },
    handleSelectionChange() {
      console.log(12)
    },
    handleFind(item:any){
    this.$router.push({
      path:'distribution/disfind',
      query:item
    })
  },
   // @ts-ignore
  handleDel(date){
    console.log(date)
     // @ts-ignore
     this.tableData=this.tableData.filter((item)=>{
        // @ts-ignore
     return item.date!=date
    })

  },
  async pagechange(page:any){
    const data = this.form
      data.page=page
      
      const res = await distribution(data)
      console.log(res)
        // @ts-ignore
        this.tableData=res.list
        // @ts-ignore
        this.total = res.total
        // @ts-ignore
        this.pageSize = res.pageSize
    },
  },
    //请求数据
   created () {
    this.pagechange(1)
},
})
</script>

<style scoped lang="less">
.link {
  margin: 0 5px;
}
:deep(.el-button){
  color: #fff;
  border-radius:0%
}
.paging{
  margin-top:10px ;
  margin-left: 450px;
}
</style>
